<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>ALLADYN Project homepage</title>
<link rel="stylesheet" href="../al.css" type="text/css">
<script src="../js/Alladyn.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var x=0 // we set the start position of the clip window
var y=0
function incx(){x+=10}
function decx(){x-=10}
function incy(){y+=10}
function decy(){y-=10}
function main() {
	show() // we set the clip
	vlay.result.style.visibility="visible" // we show the layer with the clipping result (it was invisible earlier)
}
function show() {
	vlay.result.vclip(y,x+50,y+50,x) // here we clip the layer; (x,y) is the clip position, the size of the clip is 50x50 pixels, right and bottom edges of the clip are equal to x+50 and y+50
	vlay.okno.vpos(490+x,15+y) // we move the clip preview (white frame on the picture) to the appropriate place
	setTimeout("show()",10) // we refresh the view every 10 miliseconds; if the clip position changes, the change will be applied to the view
//	alert(x+"-"+y)
}
//-->
</script>
<style type="text/css">
<!--
	div { font-family: "Trebuchet MS", "MS Sans Serif", "Arial CE", Arial, "Helvetica CE", Helvetica, sans-serif; font-size: 13px; line-height: 20px; color:#DDDDFF; }
	#rect { position: absolute; width: 100px; height: 100px; top: 15px; left: 490px; }
	#rest { position: absolute; width: 150px; height: 20px; top: 140px; left: 535px; }
	#result { position: absolute; width: 100px; height: 100px; top: 170px; left: 540px; visibility: hidden; }
	#okno { position: absolute; width: 50px; height: 50px; top: 15px; left: 490px; }
	#arr1 { position: absolute; top: 15px; left: 640px; }
	#arr2 { position: absolute; top: 52px; left: 670px; }
	#arr3 { position: absolute; top: 75px; left: 640px; }
	#arr4 { position: absolute; top: 52px; left: 595px; }
	#tekst { width: 450px; zIndex: 2; border-width: 1px; border-style: solid; border-color: #DDDDFF; padding: 10px; top: 45px; position: absolute; }
	.ec { color: #8888AA; }
	#head { position: absolute; top: 10px; }
//-->
</style>
</head>

<body background="../img/bg.gif" onload="Alladyn();main()">
<div id="head"><a href="http://alladyn.art.pl"><img src="../img/docs_exhead_eng.gif" width="450" height="35" alt="" border="0"></a></div>
<div id="tekst">
<div class="content">
	<span class="b">Example  4.2.1</span><br />
	This example shows layer clipping using <span class="b">vclip</span>.<br /><br />
	On the right side you see a picture and a white frame on it, which symbolizes the clip. You can move the clip with the arrows, moving it for 10 pixels in any direction.
	<br /><br />
</div>
<div class="ex1">
	var x=0 <span class="ec">// we set the start position of the clip window</span><br />
	var y=0<br />
	function main() {<br />
	show() <span class="ec">// we set the clip </span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;vlay.result.style.visibility="visible" <span class="ec">// we show the layer with the clipping result (it was invisible earlier)</span><br />
	}<br />
	function show() {<br />
	&nbsp;&nbsp;&nbsp;&nbsp;vlay.result.vclip(y,x+50,y+50,x) <span class="ec">// here we clip the layer; (x,y) is the clip position, the size of the clip is 50x50 pixels, right and bottom edges of the clip are equal to x+50 and y+50</span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;vlay.okno.vpos(490+x,15+y) <span class="ec">// we move the clip preview (white frame on the picture) to the appropriate place</span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;setTimeout("show()",10) <span class="ec">// we refresh the view every 10 miliseconds; if the clip position changes, the change will be applied to the view</span><br />
	}<br />
	<br />
</div>
<div class="content">
	Clicking on arrows will increase or decrease the respective coordinates (x and y) of clip position by 10.<br />
	<br />
	<a href="javascript:history.back()">Back</a>
</div>
</div>
<div id="rect"><img src="../img/docs_ex421a.gif" width="100" height="100" alt="" border="0"></div>
<div id="okno"><img src="../img/docs_ex421b.gif" width="50" height="50" alt="" border="0"></div>
<div id="arr1"><a href="javascript:void(0)" onClick="decy()"><img src="../img/docs_arr1.gif" width="29" height="45" alt="" border="0"></a></div>
<div id="arr2"><a href="javascript:void(0)" onClick="incx()"><img src="../img/docs_arr2.gif" width="45" height="29" alt="" border="0"></a></div>
<div id="arr3"><a href="javascript:void(0)" onClick="incy()"><img src="../img/docs_arr3.gif" width="29" height="45" alt="" border="0"></a></div>
<div id="arr4"><a href="javascript:void(0)" onClick="decx()"><img src="../img/docs_arr4.gif" width="45" height="29" alt="" border="0"></a></div>
<div id="result"><img src="../img/docs_ex421a.gif" width="100" height="100" alt="" border="0"></div>
<div id="rest">Clipping result:</div>
</body>
</html>